<template>
  <el-main v-loading="loading">
    <div class="userDetail">
      <el-button @click="back">返回</el-button>
      <div>
        <h3>
          用户姓名：
          <span>{{userName}}</span>
        </h3>
        <div class="list">
          <span>证件号码：</span>
          <span class="text">{{cardNum}}</span>
        </div>
        <div class="list">
          <span>手机号码：</span>
          <span class="text">{{mobile}}</span>
        </div>
        <!-- <div class="list">
          <span>用户地区：</span>
          <span class="text">{{address}}</span>
        </div>-->
      </div>
      <div>
        <h3>用户保单/服务单</h3>
        <el-table :data="userDetailList" align="center">
          <el-table-column prop="id" label="ID"/>
          <el-table-column prop="userName" label="投保人姓名"/>
          <el-table-column prop="mobile" label="投保人电话"/>
          <el-table-column prop="userName" label="被保人姓名"/>
          <el-table-column prop="mobile" label="被保人电话"/>
          <el-table-column prop="goodsName" label="所属产品"/>
          <el-table-column prop="beginTimeV" label="生效起期"/>
          <el-table-column prop="endTimeV" label="生效至期"/>
          <el-table-column prop="statusName" label="当前状态"/>
          <el-table-column prop="youServers" label="绑定服务"/>
          <!-- <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick()" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>-->
        </el-table>
      </div>
      <div v-show="detailInfoEdit">
        <user-path-edit/>
      </div>
      <!-- <div v-show="detailInfo">
        <user-path v-on:cancle="cancle"/>
      </div>-->
    </div>
  </el-main>
</template>

<script>
import { userDetailInfo } from "../../../../data/userManage";
import { ScondDay } from "utils/formData";
import UserPath from "./userDisPath";
import UserPathEdit from "./userDisPathEdit";
let defaultStatus = [
  { code: 0, name: "正常" },
  { code: 1, name: "中止" },
  { code: 2, name: "终止" },
  { code: 3, name: "失效" }
];
export default {
  name: "userDetail",
  data() {
    return {
      userName: "",
      cardNum: "",
      mobile: "",
      address: "",
      detailInfo: false,
      detailInfoEdit: false,
      loading: false,
      userDetailList: []
    };
  },
  components: {
    UserPath,
    UserPathEdit
  },
  mounted() {
    this.editInit();
  },
  methods: {
    back() {
      this.$router.back(-1);
    },
    editInit() {
      let { type, id } = this.$route.query;
      if (type == "disPath") {
        this.detailInfoEdit = true;
      }
      if (!id) return;
      this.loading = true;
      this.api
        .get(`/customer/${id}`)
        .then(res => {
          //查询产品详情
          this.dataInit(res.data);
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.data.message);
        });
    },
    dataInit(datas) {
      let { type, id, cardNum, mobile, userName, address } = this.$route.query;
      this.userName = userName;
      this.cardNum = cardNum;
      this.mobile = mobile;
      this.address = address;

      datas.map(item => {
        item.beginTimeV = ScondDay(item.beginTime);
        item.endTimeV = ScondDay(item.endTime);
        defaultStatus.map(obj => {
          if (obj.code == item.status) {
            item.statusName = obj.name;
          }
        });
        return item;
      });
      this.userDetailList = datas;
    }
    // handleClick() {
    //   this.detailInfo = true;
    //   this.detailInfoEdit = false;
    // },
    // cancle() {
    //   if (this.$route.query.type !== "disPath")
    //     return (this.detailInfo = false);
    //   this.detailInfo = false;
    //   this.detailInfoEdit = true;
    // }
  }
};
</script>
 
<style lang="less" scoped>
.userDetail {
  padding-left: 20px;
  .list {
    padding: 10px 0;
  }
}
</style>
 